<template>
        <div id="zhe" class="backs">
                <div class="nav-box">
                    <ul>
                        <li><router-link class="aaa" to='/'><span>首页</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" :to="{name:'list'}"><span>影片</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/yingyuan'><span>影院</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/shang'><span>商城</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/yanchu'><span>演出</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/my'><span>我的</span><i>&gt;</i></router-link></li>
                        <li><router-link class="aaa" to='/detail/maizuo'><span>卖座卡</span><i>&gt;</i></router-link></li>
                    </ul>
                </div>
            </div>
</template>
<script>
import yingpian from './yingpian.vue';
export default {
    components:{
        yingpian,
    }
}
</script>


<style>
    *{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: #9a9a9a;
}
html,body{
    height: 100%;
}

#zhe{
    margin-top: 50px;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0,.5);
    left: 0;
    top: 0;
    z-index: 999;
    display: none;
}
ul,li{
    list-style: none;
}
.nav-box{
    width: 210px;
    height: 100%;
    background: #282828;
    position: absolute;
    left: -210px;
    top: 0;
  
}
.nav-box ul li {
    width: 210px;
    height: 50px;
    line-height: 50px;
  
    
}
.nav-box ul li .aaa{
    display: flex;
    font-size: 12px;
}
.nav-box .aaa span {
    display: block;
    flex: 9;
    margin-left: 10px;
}
.nav-box .aaa i {
    display: block;
    flex: 1;
    margin-right: 5px;
}
</style>

